<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="app">
        <h2>我是父组件</h2>
        <hr>
        <span>1 点击 进入详情 id</span>
        <swiper :data="lunbo">
            <template v-slot:default="{ item }">
                <img @click="info(item)" :src="item.url" alt="">
            </template>
        </swiper>
        <hr>
        <span>2 点击 显示图片预览 url</span>
        <swiper :data="lunbo">
            <template v-slot:default="{ item }">
                <span @click="showImg(item)">{{ item.id }}</span>
            </template>
        </swiper>

    </div>

    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>

    Vue.component('swiper', {
        props: {
            data: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {

            }
        },
        template: `
            <div class="header">
                <ul>
                    <li v-for="item,index in data" :key="index">
                        <slot :item="item"></slot>
                    </li>
                </ul>
            </div>
        `
    });

    let vm = new Vue({
        el: ".app",
        data: {
            lunbo: [
                { id: 1, url: 'https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg' },
                { id: 2, url: 'https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png' },
                { id: 3, url: 'https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg' },
            ]
        },
        methods: {
            info({ id, url }) {
                console.log("进入详情: ", id);
            },
            showImg({ id, url }) {
                console.log("显示大图: ", url);
            }
        }
    })
</script>

</html>